import styled from "styled-components";


export const WeigingRoomBox = styled.div`
.header_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
}
    .back{
        color: #999;
        font-size: 1.4rem;
        cursor: pointer;
        margin: 1rem;
    }

    .weiging-room{
        width: 98%;
        height: 87vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        .weiging{
            width: 49%;
            background-color: #fff;
            border-radius: 1rem;
            .item-title{
                height: 5rem;
                line-height: 5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 2rem;
                border-bottom: 1px solid #F3F3F3;
                font-size: 1.6rem;
                font-weight: bold;
                .title-button{
                    padding: 0 1.5rem;
                    height: 3rem;
                    line-height: 3rem;
                    background: #DFE9F6;
                    border-radius: .4rem;
                    color: #0859CA;
                    font-size: 1.4rem;
                    font-weight: 500;
                    margin-left: 2rem;
                    cursor: pointer;
                }
                .clear{
                    background: #F2F5FD;
                    color: #0859CA;
                    border-radius: 1.8rem;
                }
            }
        }
        .top{
            height: 55%;
            .video-box{
                width: 92%;
                height: 82%;
                margin: 2rem auto;
                border-radius: 1rem;
                overflow: hidden;
            }
        }
        .bottom{
            height: 40%;
            .Logbox{
                width: 95%;
                height: 78%;
                margin: 2rem auto;
                border-radius: 1rem;
                font-size: 1.4rem;
                overflow: hidden;
                overflow-y: scroll;
            }
            .img-box{
                width: 100%;
                height: 60%;
                margin-top: 2rem;
                padding: 0 1.5rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .img-item{
                    width: 30%;
                    height: 100%;
                    border-radius: .4rem;
                    overflow: hidden;
                    .ant-image{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .img-title{
                width: 100%;
                margin-top: 2rem;
                font-size: 1.6rem;
                padding: 0 1.5rem;
                display: flex;
                justify-content: space-around;
                span{
                    width: 30%;
                    height: 100%;
                    text-align: center;
                }
            }
        }
    }
`

export const WeightBox = styled.div`
    width: 100%;
    height: 90%;
    padding-left: 4rem;
    padding-right: 2rem;
    .top-box{
        width: 100%;
        height: 45.24%;
        display: flex;
        justify-content: space-between;
        .top-box-left{
            width: 49%;
            height: 100%;
            .top-box-left-title{
                font-size: 1.6rem;
                font-weight: bold;
                color: #333;
                height: 24%;
                display: flex;
                align-items: center;
            }
            .top-box-left-main{
                width: 100%;
                height: 76%;
                background: linear-gradient(-37deg, #E8F0FA 0%, #F6FAFF 100%);
                border-radius: 1rem;
                border: 1px solid #F8FBFF;
                color: #1F73FF;
                font-size: 6rem;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                .count{
                    position: relative;
                }
                .dun{
                    position: absolute;
                    bottom: 1.5rem;
                    right: -2rem;
                    font-size: 1.5rem;
                    color: #033333;
                }
                
            }
        }
        .top-box-right{
            width: 48.5%;
            height: 100%;
            .top-box-right-title{
                font-size: 1.6rem;
                font-weight: bold;
                color: #333;
                height: 24%;
                display: flex;
                align-items: center;
            }
            .top-box-right-main{
                width: 100%;
                height: 76%;
                display: flex;
                /* 竖着排列 */
                flex-direction: column;
                justify-content: space-between;
                .right-box{
                    width: 100%;
                    height: 45%;
                    border-radius: 1rem;
                    border: 1px solid #EEEEEE;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    font-size: 1.6rem;
                    font-weight: bold;
                    color: #333;
                    .right-box-icon{
                        width: 4rem;
                        height: 4rem;
                        margin-left: 2rem;
                        margin-right: 1.5rem;
                        background-color: #EAF0F7;
                        color: #297DEB;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: .8rem;
                        font-size: 2.4rem;
                    }
                    .greenicon{
                        background-color: #EDF8F9;
                        color: #41C3A5;
                    }
                    .right-box-title{
                        color: #333333;
                        font-size: 1.4rem;
                        font-weight: 500;
                        margin-right: 3rem;
                    }
                    .right-button{
                        background: rgba(39,124,234,0.1);
                        border: 1px solid #277CEA;
                        color: #277CEA;
                    }
                }
            }
        }
    }
    .bottom-box{
        width: 100%;
        height: 54.24%;
        .bottom-box-title{
            font-size: 1.6rem;
            font-weight: bold;
            color: #333;
            height: 20%;
            display: flex;
            align-items: center;
        }
        .bottom-box-main{
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .itemBox{
                width: 30%;
                height: 44.6%;
                background: #FAFBFC;
                border-radius: 1rem;
                .itemBox-title{
                    color: #838383;
                    font-size: 1.4rem;
                    margin: 1rem 0 .5rem 1.6rem;
                }
                .itemBox-main{
                    text-align: center;
                    color: #333;
                    font-size: 1.8rem;
                    
                }
            }
        }
    }
`